<script  lang="ts" setup name="Person">
import {withDefaults} from 'vue'

// define在vue3中属于宏函数，是可以不用引入直接使用的
// import {defineProps ,withDefaults} from 'vue'
import type {Persons} from "@/types";
//  接收a，同时将props储存起来
// let xs = defineProps(['a'])
// console.log(xs)

//只接收list
// defineProps(['personList'])

//接收list + 限制类型
// defineProps<{personList:Persons}>()

//接收list + 限制类型 + 限制必要性 + 指定默认值
withDefaults(defineProps<{personList?:Persons}>(),{
  personList:()=>[{name:'野原新之助',age:5,id:'1'}]
})
</script>

<template>
  <div class="prisonBox">
    <ul>
      <li v-for="item in personList" :key="item.id">{{item.name}} -- {{item.age}}</li>
    </ul>
  </div>
</template>

<style scoped>
    .prisonBox{
      background-color:skyblue;
      padding: 20px;
      box-shadow: 0 0 10px;
      font-size: 20px;
      border-radius: 20px;
      button{
        margin: 0 10px;
      }
    }
</style>